// 商品列表查看规格数据
<template>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisible"
    :width="windowWeight"
    left
  >
    <div class="body">
      <div class="content">
        <div class="header">查看规格</div>
        <!-- 单规格数据查看 -->
        <div class="form1" v-if="goods_data.mtp_spec === 1">
          <el-form :model="goods_data" label-width="100px">
            <el-form-item label="销售价(元)：">
              <span>{{ goods_data.shop_price }}</span>
            </el-form-item>
            <el-form-item label="市场价(元)：">
              <span>{{ goods_data.market_price }}</span>
            </el-form-item>
            <el-form-item label="成本价(元)：">
              <span>{{ goods_data.cost_price }}</span>
            </el-form-item>
            <el-form-item label="重量(kg)：">
              <span>{{ goods_data.weight }}</span>
            </el-form-item>
            <el-form-item label="体积(m3)：">
              <span>{{ goods_data.volume }}</span>
            </el-form-item>
            <el-form-item label="库存(件)：">
              <span>{{ goods_data.store_count }}</span>
            </el-form-item>
            <el-form-item label="商品编码：">
              <span>{{ goods_data.goods_sn }}</span>
            </el-form-item>
          </el-form>
        </div>
        <!-- 多规格数据查看 -->
        <div class="form2" v-else>
          <el-table
            :data="tableData"
            border
            :span-method="objectSpanMethod1"
            class="specs_table"
            :header-cell-style="{
              color: '#3D3D3D',
              'font-size': '16px',
              'font-weight': '400',
            }"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="商品规格" align="center">
              <el-table-column
                v-for="(item, index) in moresfor"
                :key="index"
                :label="item.text"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    index == 0
                      ? scope.row.norms1Name
                      : index == 1
                      ? scope.row.norms2Name
                      : index == 2
                      ? scope.row.norms3Name
                      : index == 3
                      ? scope.row.norms4Name
                      : index == 4
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="规格图片" align="center">
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.image.indexOf('http://guanli.lyqswl.com') === -1?('http://guanli.lyqswl.com'+scope.row.image):scope.row.image"
                  :preview-src-list="[scope.row.image]"
                  :key="scope.row.id"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="销售价（元）" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.salePrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="市场价（元）" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.marketPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="成本价（元）" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.costPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="库存（件）" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.stock }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量(kg)" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="体积(m3)" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.volume }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否显示" align="center">
              <template slot-scope="scope">
                <el-switch
                  disabled
                  v-model="scope.row.nowShelf"
                  active-color="#13ce66"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-color="#C1C1C1"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import descartes from "../../utils/dikaerji";
export default {
  name: "Popup",
  data() {
    return {
      windowWeight: "", // 对话框宽度-多规格
      centerDialogVisible: false, // 对话框状态
      goods_data: [], // 选择的数据
      specification: true, // 规格类型（单规格、多规格）默认为单规格
      tableData: [], // 多规格表格数据
      moresfor: [], // 表头数据
      imageSpecifications: [], // 规格图片
      edit_specs: [], // 修改价格
      newData: [],
      spanArr: [],
      spanArr1: [],
      pos: [],
      pos1: [],
    };
  },
  watch: {
    goods_data() {
      // 获取多规格 Start
      if (this.goods_data.mtp_spec !== 1) {
        this.tableData = [];
        for (let i = 0; i < this.goods_data.spec_item_list.length; i++) {
          let json_D_norms = JSON.parse(this.goods_data.spec_item_list[i].sku);
          this.tableData.push(json_D_norms);
        }
        this.moresfor = [];
        for (let i = 0; i < this.goods_data.spec.length; i++) {
          let param = {
            moresvaluefor: [],
            text: "",
            upload: "1",
          };
          this.moresfor.push(param);
          this.$set(this.moresfor[i], "text", this.goods_data.spec[i].name);
        }
        this.imageSpecifications = [];
        for (let i = 0; i < this.moresfor.length; i++) {
          // 获取规格值
          for (let j = 0; j < this.goods_data.spec_item_list.length; j++) {
            let json_norms = JSON.parse(this.goods_data.spec_item_list[j].sku);
            let norms_n = "norms" + (i + 1) + "Name";
            let norms_v = "norms" + (i + 1);
            let param = {
              type: {
                label: json_norms[norms_n],
                value: json_norms[norms_v],
              },
            };
            this.moresfor[i].moresvaluefor.push(param);
            if (i === 0) {
              let img_p = { image: json_norms.image };
              this.imageSpecifications.push(img_p);
            }
          }
          // 为后面处理价格相关
          this.edit_specs = [];
          for (let i = 0; i < this.goods_data.spec_item_list.length; i++) {
            let json_D_norms = JSON.parse(
              this.goods_data.spec_item_list[i].sku
            );
            this.edit_specs.push(json_D_norms);
          }
          var result = [];
          var obj = {};
          for (var k = 0; k < this.moresfor[i].moresvaluefor.length; k++) {
            // 规格项值去重并重构数据
            if (!obj[this.moresfor[i].moresvaluefor[k].type.value]) {
              result.push(this.moresfor[i].moresvaluefor[k]);
              obj[this.moresfor[i].moresvaluefor[k].type.value] = true;
            }
          }
          this.moresfor[i].moresvaluefor = result;
        }
        this.handleMoreF();
      }
      // 获取多规格 End
    },
  },
  methods: {
    descartes, //笛卡尔积算法
    handleMoreF() {
      // 通过morefor规格项和规格值数组进行数据处理
      this.newData = [];
      // 循环规格数组
      for (let i = 0; i < this.moresfor.length; i++) {
        let newlist = [];
        // 循环规格中规格值数组
        for (
          let index = 0;
          index < this.moresfor[i].moresvaluefor.length;
          index++
        ) {
          newlist.push(this.moresfor[i].moresvaluefor[index].type);
        }
        // 为了控制表格数据展示，有效数组增加新元素，无效数据增加空元素
        if (this.moresfor[i].moresvaluefor.length > 0) {
          this.newData.push(newlist);
        } else {
          newlist = ["null"];
          this.newData.push(newlist);
          this.newData[i][this.newData[i].length - 1] = "";
        }
      }
      this.getList();
    },
    getList() {
      //转换数据
      this.tableData = [];
      // 根据规格是否唯一进行单独处理
      if (this.newData.length === 1) {
        this.newList = this.newData;
        for (let index = 0; index < this.newList[0].length; index++) {
          this.tableData.push({
            item_id: "0",
            norms1Name: this.newList[0][index].label
              ? this.newList[0][index].label
              : this.newList[0][index], // 规格1 lable
            norms1: this.newList[0][index].value
              ? this.newList[0][index].value
              : this.newList[0][index], // 规格1 value
            norms2Name: "", // 规格2 lable
            norms2: "",
            norms3Name: "", // 规格3 lable
            norms3: "",
            norms4Name: "", // 规格4 lable
            norms4: "",
            image:
              this.imageSpecifications.length > 0
                ? this.imageSpecifications[index].image
                : "", // 规格图片
            salePrice: "", // 销售价格
            marketPrice: "", // 市场价格
            costPrice: "", // 成本价格
            stock: "", // 库存
            weight: "", // 重量
            volume: "", // 体积
            nowShelf: "", // 立即上架
          });
        }
      } else if (this.newData.length > 1) {
        // 需要格式化数组
        // 如果存在有规格项但没规格项值则进行手动拆分否则笛卡尔拆分
        this.newList = this.descartes(this.newData);
        /**图片地址操作 Start*/
        let indexColorNUm = 0; // 默认使用第一张图片
        let imageNewListUrl = ""; // 图片地址
        if (this.imageSpecifications.length > 0) {
          imageNewListUrl = this.imageSpecifications[0].image;
        }
        let htmlText = this.newList[0][0]; // 在数据条数大于1的情况下取第一个规格作为对比项
        /**图片地址操作 End*/
        for (let index = 0; index < this.newList.length; index++) {
          // 使用默认取得的第一个规格与后续规格做对照，如不同则为首规格的下一个规格值图片地址也对应调整
          if (
            this.imageSpecifications.length > indexColorNUm &&
            htmlText !== this.newList[index][0]
          ) {
            indexColorNUm += 1;
            htmlText = this.newList[index][0];
            imageNewListUrl = this.imageSpecifications[indexColorNUm].image;
          }
          this.tableData.push({
            item_id: "0",
            norms1Name: this.newList[index][0]
              ? this.newList[index][0].label
                ? this.newList[index][0].label
                : this.newList[index][0]
              : "", // 规格项lable
            norms1: this.newList[index][0]
              ? this.newList[index][0].value
                ? this.newList[index][0].value
                : this.newList[index][0]
              : "", // 规格项value
            norms2Name: this.newList[index][1]
              ? this.newList[index][1].label
                ? this.newList[index][1].label
                : this.newList[index][1]
              : "",
            norms2: this.newList[index][1]
              ? this.newList[index][1].value
                ? this.newList[index][1].value
                : this.newList[index][1]
              : "",
            norms3Name: this.newList[index][2]
              ? this.newList[index][2].label
                ? this.newList[index][2].label
                : this.newList[index][2]
              : "",
            norms3: this.newList[index][2]
              ? this.newList[index][2].value
                ? this.newList[index][2].value
                : this.newList[index][2]
              : "",
            norms4Name: this.newList[index][3]
              ? this.newList[index][3].label
                ? this.newList[index][3].label
                : this.newList[index][3]
              : "",
            norms4: this.newList[index][3]
              ? this.newList[index][3].value
                ? this.newList[index][3].value
                : this.newList[index][3]
              : "",
            image: imageNewListUrl,
            salePrice: "", // 销售价格
            marketPrice: "", // 市场价格
            costPrice: "", // 成本价格
            stock: "", // 库存
            weight: "", // 重量
            volume: "", // 体积
            nowShelf: "", // 立即上架
          });
        }
      } else {
        this.tableData.push({
          item_id: "0",
          norms1Name: "",
          norms1: "",
          norms2Name: "",
          norms2: "",
          norms3Name: "",
          norms3: "",
          norms4Name: "",
          norms4: "",
          image: "",
          salePrice: "", // 销售价格
          marketPrice: "", // 市场价格
          costPrice: "", // 成本价格
          stock: "", // 库存
          weight: "", // 重量
          volume: "", // 体积
          nowShelf: "", // 立即上架
        });
      }
      // 如果是修改数据初次加载进行价格赋值
      for (let i = 0; i < this.edit_specs.length; i++) {
        this.tableData[i].image = this.edit_specs[i].image;
        this.tableData[i].salePrice = this.edit_specs[i].salePrice;
        this.tableData[i].marketPrice = this.edit_specs[i].marketPrice;
        this.tableData[i].costPrice = this.edit_specs[i].costPrice;
        this.tableData[i].stock = this.edit_specs[i].stock;
        this.tableData[i].weight = this.edit_specs[i].weight;
        this.tableData[i].volume = this.edit_specs[i].volume;
        this.tableData[i].nowShelf = this.edit_specs[i].nowShelf;
      }
      this.getSpanArr(this.tableData);
    },
    getSpanArr(data) {
      //计算位置的方法
      this.spanArr = [];
      this.pos = "";
      this.spanArr1 = [];
      this.pos1 = "";
      // 如果数据为空，重置表格
      if (data.length === 0) {
        return;
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].norms1 === data[i - 1].norms1) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          if (data[i].norms2 === data[i - 1].norms2) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      // 合并行数
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>
<style src="../../components/css/machine_css/goodsadd.css"  scoped></style>
<style scoped>
.body {
  margin: 0;
  padding: 0;
}
/************************************************************************ header **顶部标题***********************************************************/
.header {
  font-size: 16px;
  font-weight: bolder;
  /* margin: 10px; */
}
/************************************************************************ form1 *单规格*顶部标题***********************************************************/
.form1 {
  text-align: center;
  margin-bottom: 20px;
}
.form1 .el-form .el-form-item {
  border-bottom: 1px solid gainsboro;
  font-size: 14px;
  margin-bottom: 10px;
}
/************************************************************************ form2 *多规格*顶部标题***********************************************************/
.form2 {
  margin-bottom: 20px;
}
/deep/ .el-table__cell{
  border-bottom: 1px solid #EBEEF5 !important;
}
</style>